import styled from "@emotion/styled";
import { Card, Input } from "antd";
import { useEffect, useState } from "react";
import { useAddTask } from "../../../api/task";
import { useProjectIdInUrl, useTaskQueryKey } from "./utils";

export const CreateTaskView = ({ kanbanId }: { kanbanId: number }) => {
  const [name, setName] = useState("");
  const [showInput, setShowInput] = useState(false);
  const projectId = useProjectIdInUrl();
  const { mutateAsync, isLoading } = useAddTask(useTaskQueryKey());
  const toggleInput = () => setShowInput(!showInput);
  const onSubmitInput = () => {
    if (isLoading) return;
    mutateAsync({
      name,
      projectId,
      kanbanId,
      typeId: 1,
    }).then(toggleInput);
  };
  useEffect(() => {
    !showInput && setName("");
  }, [showInput]);
  if (!showInput)
    return (
      <div style={{ cursor: "pointer" }} onClick={toggleInput}>
        +创建任务
      </div>
    );
  return (
    <Card>
      <Input
        placeholder="请输入任务名"
        autoFocus
        value={name}
        onChange={(e) => setName(e.target.value)}
        onPressEnter={onSubmitInput}
      />
    </Card>
  );
};
